<template>
	<!-- 创建编辑新考试 -->
	<div class="addExamMain">
		<div class="addExamContent">
			<h3>{{addexamtype==1?'编辑项目':'创建项目'}}</h3>
			<ul>
				<li>
					<span>项目名称：</span>
					<div class="inputBox">
						<el-input v-model="createExamForm.itemname" placeholder="请输入内容"></el-input>
					</div>
				</li>
				<li>
					<span>考试日期：</span>
					<div class="inputBox">
						<el-date-picker
						  v-model="addexamtime"
						  type="daterange"
						  range-separator="至"
						  start-placeholder="开始日期"
						  end-placeholder="结束日期"
						  :default-time="['00:00:00', '23:59:59']">
						</el-date-picker>
					</div>
				</li>
                <li>
					<span>考试地区：</span>
					<div>
						<v-distpicker :province="selected.province" 
							:city="selected.city"
							@selected="onSelected"
							:only-province="true" 
							:disabled="addexamtype==1?true:false">
						</v-distpicker>
                        <!-- <div v-for="(item, index) in selectedAreas" :key="'area-'+index" style="display: flex;margin:4px 0;">
                             
                            <i style="display: inline-block;color:red;padding-left:15px;line-height:35px;font-style:normal;cursor: pointer;" 
                            @click="removeArea(index)" 
                            v-if="index > 0">删除</i>
                        </div>
                        <el-button @click="addArea">添加地区</el-button> -->
                    </div>
				</li>
                <li>
					<span>考试年级：</span>
					<div class="inputBox">
						<el-select v-model="createExamForm.grade" placeholder="请选择" :disabled="addexamtype==1?true:false">
						  <el-option
							v-for="item in gradelist"
							:key="item"
							:label="item"
							:value="item">
						  </el-option>
						</el-select>
					</div>
				</li>
				<li>
					<span>考试模式：</span>
					<div class="inputBox">
						<el-select v-model="createExamForm.navtype3" placeholder="请选择">
						  <el-option
							v-for="item in examclassify"
							:key="item.value"
							:label="item.name"
							:value="item.value">
						  </el-option>
						</el-select>
					</div>
				</li>
				<li>
					<span>赋分模型：</span>
					<div class="inputBox">
						<el-select v-model="createExamForm.fftype" placeholder="请选择">
						  <el-option
							v-for="item in ffmodel"
							:key="item.value"
							:label="item.name"
							:value="item.value">
						  </el-option>
						</el-select>
					</div>
				</li>
				<li>
					<span>项目状态：</span>
					<div class="inputBox">
						<el-select v-model="createExamForm.navtype" placeholder="请选择">
						  <el-option
							v-for="item in examstaus"
							:key="item.value"
							:label="item.name"
							:value="item.value">
						  </el-option>
						</el-select>
					</div>
				</li>
				<li style="color:red;" v-if="attentionIshow">
					<span></span>
					<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
				</li>
			</ul>
			<div class="groupbutton">
				<el-button type="primary" @click="surebc">保存</el-button>
				<el-button type="primary" @click="goback">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import VDistpicker from 'v-distpicker'
import dayjs from 'dayjs';
import {createExam,updateNavEdit} from '../api/api.js'
	export default{
		props:['examobj','addexamtype'],
		data(){
			return{
				gradelist:['高一','高二','高三'],
				ffmodel:[{name:'全国3+1+2',value:1},{name:'广东3+1+2',value:2},{name:'山东3+3',value:3}],
				examclassify:[{name:'老高考',value:0},{name:'新高考3+3',value:1},{name:'新西考3+1+2',value:2},{name:'不区分',value:3}],
				examstaus:[{name:'未开始',value:0},{name:'进行中',value:1},{name:'已结束',value:2}],
				selected: {
                    province: '',
                    city: '',
                    area: ''
                },
				attentionIshow:'',
				attention:'',
				addexamtime:'',
				createExamForm: {
					itemname: "",
					startdate: "",
					enddate: "",
					district: "",
					grade: "",
					navtype3:'',
					fftype: '',
					navtype: ''
				}
			}
		},
		mounted() {
			if(this.addexamtype == 0){
				this.attention=''
				this.addexamtime = ''
				this.createExamForm={
					itemname: "",
					startdate: "",
					enddate: "",
					district: "",
					grade: "",
					navtype3:'',
					fftype: '',
					navtype: ''
				}
				this.addexamtime=''
			}else{
				if(sessionStorage.getItem('examContent')){
					this.createExamForm.itemname = JSON.parse(sessionStorage.getItem('examContent')).nav5name
					this.addexamtime = JSON.parse(sessionStorage.getItem('examContent')).maintenancegte.split(" 至 ")
					this.createExamForm.grade =	JSON.parse(sessionStorage.getItem('examContent')).gradename
					this.createExamForm.navtype3 = JSON.parse(sessionStorage.getItem('examContent')).navtype3
					this.createExamForm.fftype = JSON.parse(sessionStorage.getItem('examContent')).fftype
					this.createExamForm.navtype = JSON.parse(sessionStorage.getItem('examContent')).type
					this.createExamForm.nav5id = JSON.parse(sessionStorage.getItem('examContent')).nav5id
					this.createExamForm.district = JSON.parse(sessionStorage.getItem('examContent')).nav5name
					this.selected.province = JSON.parse(sessionStorage.getItem('examContent')).nav5name
					// createExamForm: {
					// 	itemname: "",
					// 	startdate: "",
					// 	enddate: "",
					// 	district: "",
					// 	grade: "",
					// 	navtype3:'',
					// 	fftype: '',
					// 	navtype: ''
					// }
				}
			}
			
		},
		methods:{
            onSelected(data) {
				// 获取选择的省市区数据
				console.log('选择的数据:', data);
				// 更新表单数据
				this.createExamForm.district = data.province.value;
				// 如果需要完整地址字符串
				let fullAddress = `${data.province.value}`;
				if(data.city) fullAddress += ` ${data.city.value}`;
				if(data.area) fullAddress += ` ${data.area.value}`;
				console.log('完整地址:', fullAddress);
			},
			//保存
			surebc(){
				if(this.addexamtype==1){
					// this.createExamFor.nav5id = JSON.parse(sessionStorage.getItem('examContent')).nav5id
					if (this.addexamtime && this.addexamtime.length === 2) {
						this.createExamForm.startdate = dayjs(this.addexamtime[0]).format('YYYY-MM-DD');
						this.createExamForm.enddate = dayjs(this.addexamtime[1]).format('YYYY-MM-DD');
					}
					
					updateNavEdit(this.createExamForm).then(res => {
						if(res.code==0){
							this.$message.success('编辑考试成功');
							this.$emit('addexameditclick',false)
						}else{
							this.$message.error(res.msg);
						}
					})
				}else{
					if(this.createExamForm.itemname==''){
						this.attentionIshow = true
						this.attention='请添加考试名称'
						return false
					}else if(!this.addexamtime && this.addexamtime.length<1){
						this.attentionIshow = true
						this.attention='请添加考试时间'
						return false
					}else if(this.createExamForm.district==''){
						this.attentionIshow = true
						this.attention='请选择考试地区'
						return false
					}else if(this.createExamForm.grade==''){
						this.attentionIshow = true
						this.attention='请选择考试年级'
						return false
					}else if(this.createExamForm.navtype3==''&&this.createExamForm.navtype3!=0){
						this.attentionIshow = true
						this.attention='请选择考试分类'
						return false
					}else if(this.createExamForm.fftype==''){
						this.attentionIshow = true
						this.attention='请选择赋分模型'
						return false
					}else if(this.createExamForm.itemstatus==''&&this.createExamForm.itemstatus!=0){
						this.attentionIshow = true
						this.attention='请选择项目状态'
						return false
					}
					if (this.addexamtime && this.addexamtime.length === 2) {
						this.createExamForm.startdate = dayjs(this.addexamtime[0]).format('YYYY-MM-DD');
						this.createExamForm.enddate = dayjs(this.addexamtime[1]).format('YYYY-MM-DD');
					}
					console.info(this.createExamForm)
					createExam(this.createExamForm).then(res => {
						if(res.code==0){
							this.$message.success('创建考试成功');
							this.attentionIshow = false
							this.attention=''
							this.addexamtime = ''
							this.createExamForm={
								itemname: "",
								startdate: "",
								enddate: "",
								district: "",
								grade: "",
								navtype3:'',
								fftype: '',
								navtype: ''
							}
							this.addexamtime=''
							this.$emit('addexameditclick',false)
						}else{
							this.$message.error(res.msg);
						}
					})
				}
				// console.info(this.createExamForm.navtype3)
				
			},
			// 返回
			goback(){
				this.$emit('addexameditclick',false)
				this.attentionIshow = false
				this.attention=''
				this.addexamtime = ''
				this.createExamForm={
					itemname: "",
					startdate: "",
					enddate: "",
					district: "",
					grade: "",
					navtype3:'',
					fftype: '',
					navtype: ''
				}
				this.addexamtime=''
				this.$emit('closedExam')
			},
		},
        components: {
            VDistpicker
        }
	}
</script>

<style scoped>
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:110px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.el-checkbox{
		margin-right:8px;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.inputBox1 >>> .el-tag.el-tag--info{
		background: #F2F6FB;
		border: 1px solid #D8E4F0;
		color: #B3B8C2;
	}
	.addExamContent >>> .distpicker-address-wrapper select{
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox1 >>> .el-select .el-tag__close.el-icon-close{
		background:none;
		color:#B3B8C2;
	}
    .inputBox >>> .distpicker-address-wrapper select{
		border-radius: 10px;
    	height: 35px;
		font-size: 16px;
		line-height: 35px;
		border: 1px solid #D8E4F0;
		color:#606266;
		padding:0 10px;
	}
</style>